import React from 'react';
import { Button, Input, Card, Modal,  Col, Row, Tabs, Form, Table } from 'antd';
import Highlight from 'react-highlight';

import { formatJson } from 'src/utils/transform';
import AppInfoCard from 'src/components/biz/AppInfoCard';
import IndexInfoCard from 'src/components/biz/IndexInfoCard';

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;

class Query extends React.Component {

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields(
      { force: true },
      (err, values) => {
        if (!err) {
          this.props.onQuerySubmit(values);
        }
      },
    );
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
    };

    const { appData, entity, dataQueryResult } = this.props;

    const cardConfig = {
      bordered: false
    };

    const { list, columns, generalInfo } = dataQueryResult;

    return (
      <Modal
          visible={ this.props.visible }
          title={ this.props.title }
          onCancel={ this.props.onCancel }
          footer={ false }
          wrapClassName="vertical-center-modal form-modal"
          width= { 800 }
          height={ this.props.height }
          maskClosable={ false }
        >
        <div>
          <Row style={{ marginBottom: '20px' }}>
            <Col span="24">
              <Card title={ appData.projectName + '项目信息' } {...cardConfig} >
                <AppInfoCard data={appData}/>
              </Card>
            </Col>
          </Row>
          <Row style={{ marginBottom: '20px' }}>
            <Col span="24">
              <Card title={ entity.basicInfo.indexName + '索引信息' } {...cardConfig}>
                <IndexInfoCard data={entity.basicInfo}/>
              </Card>
            </Col>
          </Row>
          <Form>
            <Tabs defaultActiveKey="sql" onChange={this.props.onDataQueryTypeChange}>
              <TabPane tab="按SQL" key="sql">
                <FormItem>
                    {
                      getFieldDecorator('sql.sql')(
                        <Input type="textarea" placeholder="输入sql语句" autosize={{ minRows: 2, maxRows: 10 }} />
                      )
                    }
                </FormItem>
              </TabPane>
            </Tabs>
          </Form>
          <Button type="primary" size={'default'} onClick={this.handleSubmit}>查询</Button>
          <Row style={{ marginTop: '20px' }}>
            <Col span="24">
              <div>{generalInfo}</div>
              <div>
                {
                  list.length > 0
                  &&
                  <Tabs defaultActiveKey="raw">
                    <TabPane tab="RAW" key="raw">
                      <Highlight>
                        {formatJson(list)}
                      </Highlight>
                    </TabPane>
                    <TabPane tab="TABLE" key="table">
                      <Highlight>
                      <Table size="middle" columns={ columns } dataSource={ list } pagination={false}/>
                      </Highlight>
                    </TabPane>
                  </Tabs>
                }
              </div>
            </Col>
          </Row>
        </div>
      </Modal>
    );
  }
}
export default Form.create()(Query);
